<template>
    <div class="mx-auto bg-stone-200">
        <div class="max-w-screen-xl py-16 mx-auto flex flex-col justify-center items-center">
            <div class="w-full px-8 grid grid-cols-1 md:grid-cols-4 gap-8">
                <div v-for="groupItem in footerNavList" class="flex-col justify-center">
                    <p class="text-sm text-stone-700 font-semibold">{{ groupItem.title }}</p>
                    <div v-for="item in groupItem.children">
                        <p
                            class="mt-4 flex items-center text-sm text-stone-600 hover:text-blue-400 cursor-pointer"
                            @click="clickToSite(item)"
                        >
                            {{ item.title }}
                            <el-icon color="#bfbfbf" size="12"><TopRight /></el-icon>
                        </p>
                    </div>
                </div>
            </div>

            <!-- 备案 -->
            <div class="mt-32 w-full flex justify-evenly flex-wrap">
                <p
                    class="text-sm text-gray-600 underline hover:text-blue-400 cursor-pointer"
                    @click="clickToBeiAn"
                >
                    粤ICP备2020096669号
                </p>
                <p class="text-gray-600">Copyright © 2024 krisli.</p>
            </div>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { TopRight } from '@element-plus/icons-vue';
import { footerNavList } from '@/config/index';

const clickToBeiAn = () => {
    window.open('https://beian.miit.gov.cn/');
};

const clickToSite = (item: any) => {
    window.open(item.link);
};
</script>
